<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>业务管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>
<!--筛选-->
<form class="layui-form" action="" lay-filter="queryFliter">
    <div class="layui-form-item" style="margin-top:10px;margin-bottom: 0">
        <div class="layui-inline">
            <label class="layui-form-label">业务类型</label>
            <div class="layui-input-inline">
                <input type="tel" name="businessTopType" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-inline">
                <input type="text" name="customId" lay-verify="email" autocomplete="off" class="layui-input">
            </div>
            <button type="submit" class="layui-btn" id="queryByParam">筛选</button>
        </div>
    </div>
</form>

<!--列表显示-->
<table id="businessTable" lay-filter="businessFilter"></table>

<!--行编辑工具栏-->
<script type="text/html" id="barRowEdit" >
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="upload"><i class="layui-icon">&#xe654;</i></button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i></button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i></button>
    </div>
    <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="upload">文件上传</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
</script>

<!--头部工具栏-->
<script type="text/html" id="toolbarHead">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>

<!--部门添加form-->
<form id="businessAddForm" class="layui-form" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">客户ID</label>
        <div class="layui-input-block">
            <input type="text" name="customId" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">业务名称</label>
        <div class="layui-input-block">
            <input type="text" name="businessName" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">业务类型</label>
        <div class="layui-input-inline">
            <select id="topType" name="businessTopType"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商标类别</label>
        <div class="layui-input-block">
            <input type="text" name="trademarkType" readonly id="addTrademarkType" required lay-verify="required"
                   placeholder="请选择商标类别"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">业务种类</label>
        <div class="layui-input-block">
            <input type="text" name="businessSecondType" readonly id="addBusinessType" required lay-verify="required"
                   placeholder="请选择业务种类"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">代理费</label>
        <div class="layui-input-block">
            <input type="text" name="proxyMoney" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input th:value="${session.userInfo.userName}" name="createBy" hidden>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="businessAddFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--商标类别弹窗-->
<form class="layui-form" action="" id="trademarkTypeSelect"
      style="display: none;margin-right: 40px;margin-top: 20px">
    <div class="layui-form-item">
        <div class="layui-input-block" id="trademarkRadios">

        </div>
    </div>
</form>

<!--业务种类弹窗-->
<form class="layui-form" action="" id="businessSecondTypeSelect"
      style="display: none;margin-right: 40px;margin-top: 20px">
    <div class="layui-form-item">
        <div class="layui-input-block" id="businessSecondTypeRadios">

        </div>
    </div>
</form>

<!--部门更新form-->
<form id="businessUpdateForm" class="layui-form" lay-filter="businessUpdateFilter" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">业务ID</label>
        <div class="layui-input-block">
            <input type="" name="businessId" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户名ID</label>
        <div class="layui-input-block">
            <input type="text" name="customId" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">业务名称</label>
        <div class="layui-input-block">
            <input type="text" name="businessName" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">业务类型</label>
        <div class="layui-input-block">
            <select name="businessTopType" lay-filter="aihao">
                <option value=""></option>
                <option value="0">商标</option>
                <option value="1" selected="">版权</option>
                <option value="2">专利</option>
                <option value="3">项目申报</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商标类别</label>
        <div class="layui-input-block">
            <input type="text" name="trademarkType" readonly id="updateTrademarkType" required lay-verify="required"
                   placeholder="请选择商标类别"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">业务种类</label>
        <div class="layui-input-block">
            <input type="text" name="businessSecondType" readonly id="updateBusinessType" required lay-verify="required"
                   placeholder="请选择业务种类"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">成交价格</label>
        <div class="layui-input-block">
            <input type="text" name="price" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">代理费</label>
        <div class="layui-input-block">
            <input type="text" name="proxyMoney" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <input th:value="${session.userInfo.userName}" name="updateBy" hidden>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="businessUpdateFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--行工具栏上传-->
<form id="uploadForm" class="layui-form" lay-filter="uploadFliter" style="display: none"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">业务名</label>
        <div class="layui-input-block">
            <input type="text" name="businessName" value="businessName" placeholder="请输入" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1" >上传文件</button>
        </div>
    </div><br><br>
</form>

<!--js 代码-->
<script src="/layui/layui.js"></script>
<script>
    layui.use(['table','layer','jquery','form','upload'], function(){
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        var form = layui.form;

        //部门列表js
        let businessTable = table.render({
            elem: '#businessTable'
            ,toolbar: '#toolbarHead'
            ,url: '/business/queryAll' //数据接口
            ,page: true //开启分页
            ,cellMinWidth: 80
            ,cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'} //开启复选框

                    ,{field: 'applicantCode', title: '申请号'}
                    ,{field: 'applicantTime', title: '申请时间',  sort: true}
                    ,{field: 'businessTopType', title: '业务类型',sort: true}
                    ,{field: 'businessName', title: '业务名'}
                    ,{field: 'trademarkType', title: '商标类别',  sort: true}
                    ,{field: 'businessSecondType', title: '业务种类',sort: true}
                    ,{field: 'progressType', title: '进度',sort: true}
                    ,{field: 'price', title: '价格',sort: true}
                    ,{field: 'proxyMoney', title: '代理费',sort: true}
                    ,{field: 'createBy', title: '创建者'}
                    ,{field: 'customId', title: '客户ID',sort: true}

                    ,{fixed: 'right', align:'center', toolbar: '#barRowEdit'}
                ]
            ]
        });

        //行编辑工具栏监听事件
        table.on('tool(businessFilter)', function(obj){
            //获取当前行数据
            var data = obj.data;
            //==不匹配类型  1=='1' true      ==== 匹配类型  1==='1' false

            if(obj.event === 'upload'){
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                form.val("uploadFliter",data);
                layer.open({
                    type: 1,
                    area:['400px', '200px'],
                    content: $('#uploadForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                var upload = layui.upload;
                //执行实例
                var uploadInst = upload.render({
                    elem: '#test1' //绑定元素
                    ,url: '/business/uploadFile' //上传接口
                    ,auto:true // 选择文件后自动上传
                    ,accept:"file"
                    ,field:"file"
                    ,done: function(res){
                        //上传完毕回调
                        if(res.code==0){
                            alert("导入成功");
                        }
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
            }
            else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:"/business/deleteById",
                        type:"DELETE",
                        data:{businessId:data.businessId},
                        dataType:"json",
                        success:function (resp) {
                            if(resp.code==0){
                                layer.msg(resp.msg);
                                //重新加载数据
                                businessTable.reload();
                            }
                        },
                        error:function (e) {
                            layer.msg("请求失败");
                        }
                    });
                });
            }
            else if(obj.event === 'edit'){
                //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                form.val("businessUpdateFilter",data);
                layer.open({
                    type: 1,
                    area:['500px', '525px'],
                    content: $('#businessUpdateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }
        });

        //头部工具栏监听事件
        table.on('toolbar(businessFilter)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            let  checkData = checkStatus.data;
            switch(obj.event){
                case 'add':
                    // layer.msg('添加');
                    //重置form表单
                    // $("#businessAddForm").reset();
                    document.getElementById("businessAddForm").reset();
                    layer.open({
                        type: 1,
                        area:['500px', '500px'],
                        content: $('#businessAddForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    break;
                case 'delete':
                    //layer.msg('删除');
                    //layer.msg(JSON.stringify(checkData));
                    //判断是否选中行
                    if(checkData.length==0){
                        layer.msg('请至少选择一行数据');
                        return;
                    }
                    layer.confirm('真的删除行么', function(index) {
                        //获取所有选中行id
                        let businessIds = "";
                        for (let i = 0; i < checkData.length; i++) {
                            businessIds += checkData[i].businessId + ",";
                        }
                        ;
                        businessIds = businessIds.substr(0, businessIds.length - 1);
                        layer.msg(businessIds);
                        //调用批量删除
                        $.ajax({
                            url: "/business/deleteByIds",
                            type: "DELETE",
                            data: {businessIds: businessIds},
                            dataType: "json",
                            success: function (resp) {
                                if (resp.code == 0) {
                                    layer.msg(resp.msg);
                                    //重新加载数据
                                    businessTable.reload();
                                }
                            },
                            error: function (e) {
                                layer.msg("请求失败");
                            }
                        });
                    });
                    break;
                case 'update':

                    if(checkData.length!=1){
                        layer.msg('编辑只能选中一行');
                        return;
                    }
                    // alert(JSON.stringify(checkData));
                    form.val("businessUpdateFilter",checkData[0]);
                    layer.open({
                        type: 1,
                        area:['400px', '250px'],
                        content: $('#businessUpdateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    break;
            };
        });

        //添加监听事件
        form.on('submit(businessUpdateFilter)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"/business/update",
                type:"PUT",
                data:data.field,
                dataType:"json",
                success:function (resp) {
                    if(resp.code==0){
                        layer.msg(resp.msg);
                        //关闭弹框
                        layer.closeAll('page');
                        //重新加载数据
                        businessTable.reload();
                    }
                },
                error:function (e) {
                    layer.msg("请求失败");
                }
            });
            return false;
        });
        //更新监听事件
        form.on('submit(businessAddFilter)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"/business/insert",
                type:"POST",
                data:data.field,
                dataType:"json",
                success:function (resp) {
                    if(resp.code==0){
                        layer.msg(resp.msg);
                        //关闭弹框
                        layer.closeAll('page');
                        //重新加载数据
                        businessTable.reload();
                    }
                },
                error:function (e) {
                    layer.msg("请求失败");
                }
            });
            return false;
        });

        // 文件上传监听
        form.on('submit(uploadFliter)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"/upload/insert",
                type:"PUT",
                data:data.field,
                dataType:"json",
                success:function (resp) {
                    if(resp.code==0){
                        layer.msg(resp.msg);
                        //关闭弹框
                        layer.closeAll('page');
                        //重新加载数据
                        businessTable.reload();
                    }
                },
                error:function (e) {
                    layer.msg("请求失败");
                }
            });
            return false;
        });

        // 筛选监听
        form.on('submit(queryFliter)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"/business/queryAll?page=1&limit=10",
                type:"GET",
                data:data.field,
                dataType:"json",
                success:function (resp) {
                    if(resp.code==0){
                        layer.msg(resp.msg);
                        //关闭弹框
                        layer.closeAll('page');
                        //重新加载数据
                        businessTable.reload();
                    }
                },
                error:function (e) {
                    layer.msg("请求失败");
                }
            });
            return false;
        });

        /*form.on('select(businessTopTypeFliter)',function (data) {
            alert('haha')
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"/dictionary/queryAll",
                type:"GET",
                data:data.field,
                dataType:"json",
                success:function (resp) {
                    if(resp.code==0){
                        layer.msg(resp.msg);
                        '#businessTopTypeFliter'.
                        //关闭弹框
                        layer.closeAll('page');
                        //重新加载数据
                        businessTable.reload();
                    }
                },
                error:function (e) {
                    layer.msg("请求失败");
                }
            })
        })

        //字典下拉监听
        form.on('select.on(businessTopTypeFliter)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:"/dictionary/queryAll&",
                type:"GET",
                data:data.field,
                dataType:"json",
                success:function (resp) {
                    if(resp.code==0){
                        layer.msg(resp.msg);
                        '#businessTopTypeFliter'.
                        //关闭弹框
                        layer.closeAll('page');
                        //重新加载数据
                        businessTable.reload();
                    }
                },
                error:function (e) {
                    layer.msg("请求失败");
                }
            });
            return false;
        });*/

        let $topType = $("#topType");
        let $updateTopType = $("#updateTopType");
        let $modelInsertTopType = $("#modelInsertTopType");
        let $trademarkRadios = $('#trademarkRadios')
        let $businessSecondTypeRadios = $('#businessSecondTypeRadios')
        let options = '';
        let trademarkRadios = '';
        let businessSecondTypeRadios = '';
        //填充下拉框
        $.ajax({
            url: "/business/queryAllDictionary?page=1&limit=10",
            type: "GET",
            dataType: "JSON",
            success: function (allDictionary) {
                //将数据放到select中
                for (let i = 0; i < allDictionary.length; i++) {
                    if (allDictionary[i].type_id == 2) {
                        options += '<option value="' + allDictionary[i].dictionary_name + '">' + allDictionary[i].dictionary_name + '</option>';
                    }
                }
                //将数据放到商标类别选择框中
                for (let i = 0; i < allDictionary.length; i++) {
                    if (allDictionary[i].type_id == 1) {
                        trademarkRadios += '<button style="border: 0;background-color: white" lay-submit lay-filter="trademarkFilter"><input type="radio" lay-submit="" lay-filter="checkFilter" name="trademarkInput" title="' + allDictionary[i].dictionary_name + '" value="' + allDictionary[i].dictionary_name + '"/></button>';
                    }
                }
                //将数据放到业务种类选择框中
                for (let i = 0; i < allDictionary.length; i++) {
                    if (allDictionary[i].type_id == 3) {
                        businessSecondTypeRadios += '<button style="border: 0;background-color: white" lay-submit lay-filter="businessFilter"><input type="radio" name="businessInput" title="' + allDictionary[i].dictionary_name + '" value="' + allDictionary[i].dictionary_name + '"/></button>';
                    }
                }

                $businessSecondTypeRadios.html(businessSecondTypeRadios)
                $trademarkRadios.html(trademarkRadios)
                $topType.html(options)
                $updateTopType.html(options)
                $modelInsertTopType.html(options)
                form.render()
            }
        })

        //商标弹窗
        let trademarkTypeOpen;
        //业务种类弹窗
        let businessSecondTypeOpen;

        //点击弹出选择商标类别框
        $("input[name=trademarkType]").click(function () {
            trademarkTypeOpen = layer.open({
                title: '选择商标类别',
                type: 1,
                content: $('#trademarkTypeSelect'),
                area: ['650px', '600px']
            });
        })

        //点击弹出选择业务种类框
        $("input[name=businessSecondType][id!=queryBusinessSecondType]").click(function () {
            businessSecondTypeOpen = layer.open({
                title: '选择业务种类',
                type: 1,
                content: $('#businessSecondTypeSelect'),
                area: ['670px', '600px']
            });
        })

        //选择好商标类别，关闭弹窗
        form.on('submit(trademarkFilter)', function (data) {
            layer.close(trademarkTypeOpen)
            $("#addTrademarkType").val(data.field.trademarkInput);
            $("#updateTrademarkType").val(data.field.trademarkInput);
            $("#modelInsertTrademarkType").val(data.field.trademarkInput);
            return false;
        })
        //选择好业务种类，关闭弹窗
        form.on('submit(businessFilter)', function (data) {
            layer.close(businessSecondTypeOpen)
            $("#addBusinessType").val(data.field.businessInput);
            $("#updateBusinessType").val(data.field.businessInput);
            $("#modelInsertBusinessType").val(data.field.businessInput);
            return false;
        });


    });
</script>
</body>
</html>